<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-music</title>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" th:href="@{/webjars/element-ui/lib/theme-chalk/index.css}">
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="20">
            <div th:replace="~{admin2/header::header}"></div>
            <el-row style="margin-bottom: 12px;">
                <el-button type="success" size="mini" @click="onBackHome">返回</el-button>
            </el-row>

            <el-row style="margin-bottom: 12px;">
                <el-divider content-position="left">导出音乐</el-divider>
            </el-row>

            <el-row style="margin-bottom: 12px;">
                <el-button size="mini" type="primary" @click="onRefresh">刷新</el-button>
            </el-row>

            <el-row style="margin-bottom: 12px;">
                <el-form label-width="80px" :model="dataForm">
                    <el-form-item label="收录总量">
                        <span style="color: #606266">{{dataForm.totalCount}}</span>
                    </el-form-item>

                    <el-form-item label="歌曲列表">
                        <el-input v-model="dataForm.musicInfoList"
                                type="textarea"
                                :readonly=true
                                autosize>
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <div th:replace="~{admin2/admin-foot::admin-foot}"></div>
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
    </el-row>
</div>
</body>
<script th:src="@{/webjars/vue/dist/vue.js}"></script>
<script th:src="@{/webjars/element-ui/lib/index.js}"></script>
<script type="text/javascript" th:src="@{/webjars/axios/dist/axios.js}"></script>
<script type="text/javascript" th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            return {
                dataForm: {
                    musicInfoList: null,
                    totalCount: null
                },
                sys: {
                    dateYear: new Date().getFullYear()
                }
            }
        },
        mounted() {
            this.initData();
            this.initSys();
        },
        methods: {
            onRefresh() {
                this.initSys();
                this.initData();
            },
            initSys() {
                this.sys.dateYear = new Date().getFullYear()
            },
            onBackHome() {
                location.href = './';
            },
            initData() {
                this.dataForm.musicInfoList = null;
                axios.post('./exportMusic', {})
                    .then(response => {
                        if (response.status === 302) {
                            window.location.href = response.headers['location'];
                        }
                        if(response.data.code === 0) {
                            this.dataForm.musicInfoList = response.data.data.musicList;
                            this.dataForm.totalCount = response.data.data.totalCount;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>
